<template>
  <!-- 信息提交 -->
  <view class="uni-uploader__files">
    <!-- 图片 -->
    <block v-for="(item, index) in fileList" :key="index">
      <view class="uni-uploader__file" :style="imgAttrs">
        <view class="uploader_img" v-if="item.fileType !== 'mp4'">
          <view class="icon-cuo" @tap="delect(index)">x</view>
          <view @click="previewImg(index)">
            <image
              mode= "widthFix"
              :style="imgAttrs"
              class="uni-uploader__img"
              :src="item.fileUrl"
              :data-src="item.fileUrl"
              @tap="previewImage"
            ></image>
          </view>
        </view>
        <view class="uploader_video" :style="imgAttrs" v-else>
          <view class="icon-cuo" @tap="delectVideo(index)">x</view>
          <video
            :style="imgAttrs"
            direction="0"
            id="myVideo"
            @click="playvideo"
            :src="item.fileUrl"
            class="video"
            @fullscreenchange="fullscreenchange"
          ></video>
        </view>
      </view>
    </block>
    <view
      class="uni-uploader__input-box"
      :style="imgAttrs"
      @tap="chooseVideoImage"
    >
      <view>+</view>
    </view>
  </view>
</template>

<script>
var URL= "https://daily.fangliyun.com"
export default {
  props: {
    //接收父组件传来的值
    imgAttrs: {
      type: Object,
      default: () => {
        return {
        /*    width: '100%',
          height: '400rpx',   */
        }
      },
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      videoContext: '',
      src: '', //视频存放
      sourceTypeIndex: 2,
      checkedValue: true,
      checkedIndex: 0,
      sourceType: ['拍摄', '相册', '拍摄或相册'],
      cameraList: [
        {
          value: 'back',
          name: '后置摄像头',
          checked: 'true',
        },
        {
          value: 'front',
          name: '前置摄像头',
        },
      ],
      cameraIndex: 0,
      VideoOfImagesShow: true,
    }
  },
  onUnload() {
    ;(this.src = ''),
      (this.sourceTypeIndex = 2),
      (this.sourceType = ['拍摄', '相册', '拍摄或相册'])
  },
  methods: {
    playvideo(e) {
      this.videoContext = uni.createVideoContext('myVideo')
      this.videoContext.requestFullScreen({ direction: 0 })
      this.videoContext.play()
    },
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext.pause()
        this.showvideo = false
      }
    },
    previewImg(index) {
      const imgArrays = []
      for (let i = 0; i < this.fileList.length; i++) {
        imgArrays.push(this.fileList[i].fileUrl)
      }
      uni.previewImage({
        current: index,
        urls: imgArrays,
        indicator: 'number',
        loop: true,
      })
    },
    chooseVideoImage() {
      uni.showActionSheet({
        title: '选择上传类型',
        itemList: ['图片', '视频'],
        success: (res) => {
          if (res.tapIndex == 0) {
            this.chooseImages()
          } else {
            this.chooseVideo()
          }
        },
      })
    },
    chooseImages() {
      const that = this
      // 上传图片
      uni.chooseImage({
        count: 4, //默认9
        // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: (res) => {
          let igmFile = res.tempFilePaths
          for (let i = 0; i < igmFile.length; i++) {
            uni.uploadFile({
              url: URL+'/prod-api/common/upload',
              method: 'POST',
              filePath: igmFile[i],
              name: 'file',
              success: (res) => {
                let imgUrls = JSON.parse(res.data) //微信和头条支持
                imgUrls.data.fileUrl =
                 URL+ '/prod-api' + imgUrls.data.filePath
                const newData = JSON.parse(JSON.stringify(this.fileList))
                const imgList = newData.concat(imgUrls.data) //微信
                that.$emit('changeComponentData', imgList)
              },
            })
          }
        },
      })
    },
    chooseVideo() {
      // 上传视频
      uni.chooseVideo({
        maxDuration: 60,
        count: 1,
        camera: this.cameraList[this.cameraIndex].value,
        sourceType: ['album'],
        success: (responent) => {
          let videoFile = responent.tempFilePath
          uni.uploadFile({
            url: URL+'/prod-api/common/upload',
            filePath: videoFile,
            name: 'file',
            success: (res) => {
              let imgUrls = JSON.parse(res.data) //微信和头条支持
              imgUrls.data.fileUrl =
               URL+ '/prod-api' + imgUrls.data.filePath
              const newData = JSON.parse(JSON.stringify(this.fileList))
              const imgList = newData.concat(imgUrls.data) //微信          
              this.$emit('changeComponentData', imgList)
            },
          })
        },
      })
    },
    previewImage: function (e) {
      //预览图片
      var current = e.target.dataset.src
      uni.previewImage({
        current: current,
        urls: this.fileList,
      })
    },
    delect(index) {
      uni.showModal({
        title: '提示',
        content: '是否要删除该图片',
        success: (res) => {
          if (res.confirm) {
            const imgList = this.fileList
            imgList.splice(index, 1)
            this.$emit('changeComponentData', imgList)
          }
        },
      })
    },
    delectVideo(index) {
      uni.showModal({
        title: '提示',
        content: '是否要删除此视频',
        success: (res) => {
          if (res.confirm) {
            const imgList = this.fileList
            imgList.splice(index, 1)
            this.$emit('changeComponentData', imgList)
          }
        },
      })
    },
  },
}
</script>

<style>
.form-item {
  width: 100%;
}
.uni-uploader__files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.uni-uploader__file{
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom:20rpx;
  background: #f5f5f5;
}
.uploader_video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 450rpx;
  margin-bottom:20rpx;
  background: #f5f5f5;
}
.uni-uploader__img {
  width: 100%;
 /* height:333rpx;  180upx; */
  min-height:400rpx;
  background: #eee;
}
.icon-cuo {
  position: absolute;
  right: 0;
  background: red;
  color: #ffffff;
  height: 30rpx;
  width: 30rpx;
  line-height: 26rpx;
  text-align: center;
  z-index: 99999;
}
.video {
  width: 100%;
  height: 100%;
}

.login-input-box {
  position: relative;
  border-bottom: 1upx solid #eeeeee;
}
.login-input-box .forget,
.login-input-box .phone {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 100;
}
.login-input-box .phone {
  width: 100upx;
  left: 0;
  color: #666666;
  font-weight: bold;
}
.login-input-box .phone-input {
  padding-left: 100upx;
}
.address-wrap,
.open-info {
  margin-top: 20upx;
}
.open-info > view:last-child {
  color: #999999;
}
.uni-uploader__input-box {
  height: 320rpx;
  width: 100%;
  background: #eaeaea;
  text-align: center;
  font-size: 60px;
  color: #b8b8b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}
</style>
